<template>
  <div style="padding:20px">
    <el-input v-model="fireHydantName" placeholder="请输入监测点名称">
      <i class="el-icon-search" slot="suffix" style="position:relative;top:10px;right:10px;">
      </i>
    </el-input>
    <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%;margin-top:20px;">
      <el-table-column prop="monitorPointName" label="监测点名称" align="center" width="110">
      </el-table-column>
      <el-table-column prop="outPressure" label="出厂压力" align="center" width="100">
      </el-table-column>
      <el-table-column prop="turbidity" label="浊度" align="center" width="100">
      </el-table-column>
      <el-table-column prop="chlorine" label="余氯" align="center" width="100">
      </el-table-column>
      <el-table-column prop="ph" label="pH" align="center" width="100">
      </el-table-column>
      <el-table-column prop="cleanLevel" label="清水池液位" align="center" width="100">
      </el-table-column>
      <el-table-column prop="outflowTotalToday" label="今日供水量" align="center" width="100">
      </el-table-column>
      <el-table-column prop="electricQuantityToday" label="今日耗电量" align="center" width="100">
      </el-table-column>
      <el-table-column prop="powerWaterToday" label="吨水电耗" align="center" width="100">
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:25px" background layout="prev, pager, next" :total="11" :small="true" @current-change="changeAll">
    </el-pagination>
  </div>
</template>
<script>
import {
  getRealtimeReportData,
} from "@/api/schedule/gisSchedule/index"
export default {
  data () {
    return {
      fireHydantName: "",
      tabName: "all",
      tableData: [],
      tableNormalData: [],
      tableAlertData: [],
      tableFollowData: [],
    }
  },
  mounted () {
    this.handleRealData(0)
  },
  methods: {
    handleRealData (state) {
      let obj = {
        onlineState: state
      }
      getRealtimeReportData(obj).then(response => {
        let dataList = response.data
        let accordList = []
        dataList.map(it => {
          if (it.type == 1) {
            accordList.push(it)
          }
        })
        accordList.map(item => {
          if (!item.monitorPointName) {
            item.monitorPointName = '/'
          }
          if (item.outPressure) {
            item.outPressure = item.outPressure
          } else {
            item.outPressure = "/"
          }
          if (item.cleanTurbidity) {
            item.turbidity = item.cleanTurbidity
          } else {
            item.turbidity = "/"
          }
          if (item.cleanChlorine) {
            item.chlorine = item.cleanChlorine
          } else {
            item.chlorine = "/"
          }
          if (item.cleanPh) {
            item.ph = item.cleanPh
          } else {
            item.ph = "/"
          }
          if (item.cleanLevel) {
            item.cleanLevel = item.cleanLevel
          } else {
            item.cleanLevel = "/"
          }
          if (item.outflowTotalToday) {
            item.outflowTotalToday = item.outflowTotalToday
          } else {
            item.outflowTotalToday = "/"
          }
          if (item.electricQuantityToday) {
            item.electricQuantityToday = item.electricQuantityToday
          } else {
            item.electricQuantityToday = "/"
          }
          if(item.outflowTotalToday && item.electricQuantityToday) {
            item.powerWaterToday = item.electricQuantityToday / item.outflowTotalToday
          } else {
            item.powerWaterToday = "/"
          }
          if (!item.createDate) {
            item.createDate = "/"
          }
        })
        this.tableData = accordList
      }).catch(err => {
        debugger
      })
    },
    changeAll () {

    }
  }
}
</script>
<style lang="scss" scoped>
.ic {
  width: 9px;
  height: 9px;
  border-radius: 4px;
  position: relative;
  top: 15px;
  right: 10px;
}
</style>